<template>
    <div>
        <div class="navbar">
            <span class="iconfont icon-fanhui-tongyong" @click="$router.go(-1)"></span>
            <span class="toUser">收到的赞</span>
        </div>

        <div v-for="like in likes">
            <div class="message-section">
                <div class="message">
                    <div class="portrait">
                        <img class="user-portrait" :src="like.userImg" v-if="like.userImg">
                        <img class="user-portrait" src="../assets/default_img.jpg" v-else>
                        <span class="message-check" v-if="!like.checked"></span>
                    </div>
                    <div class="user">
                        <span class="split-line"></span>
                        <span class="user-name">{{like.name+"  赞了  "+like.item_name}}</span>
                        <span class="split-line"></span>
                    </div>
                    <div class="portrait">
                        <img class="user-portrait" :src="like.img" v-if="like.img">
                        <img class="user-portrait" src="../assets/default_img.jpg" v-else>
                        <span class="message-check" v-else>{{like.checked}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex'
    import Navbar from "../components/common/navbar";

    export default {
        name: "likes",
        components: {Navbar},
        computed: {
            ...mapState(['likes'])
        },
        methods: {},
        destroyed() {
            this.$store.dispatch('asyncCheckLikes')
        }
    }
</script>

<style lang="scss">
    .navbar {
        display: flex;
        align-items: center;
        padding: 2.104vw 0;

        .icon-fanhui-tongyong {
            margin-left: 2vw;
        }

        .toUser {
            margin-left: 5.042vw;
        }
    }

    .message-section {
        .message {
            display: flex;
            align-items: center;

            .portrait {
                .user-portrait {
                    width: 40px;
                    height: 40px;
                    border: 1px solid white;
                    border-radius: 50%;
                }

                .message-check {
                    position: absolute;
                    font-size: 2px;
                    padding: 1px;
                    color: white;
                    line-height: 12px;
                    text-align: center;
                    background: red;
                    width: 11px;
                    height: 11px;
                    border-radius: 50%;
                }
            }


            .user {
                width: 100%;
                margin-left: 10px;
                display: flex;
                flex-direction: column;

                .user-name {
                    font-size: 16px;
                    color: #7a7a7a;
                    margin-top: 2px;
                    margin-bottom: 2px;

                }

                .user-message {
                    color: rgba($color: #000000, $alpha: .6);
                    font-size: 13px;
                    margin-bottom: 2px;
                }

                .date {
                    color: rgba($color: #000000, $alpha: .6);

                    font-size: 13px;
                    position: absolute;
                    right: 50px;
                }

                .split-line {
                    border-top: 1px solid rgba($color: #bfbfbf, $alpha: .7);
                    width: 100%;
                }
            }
        }
    }
</style>